{% extends 'baykeshop/base_site.html' %}

{% load flatpages %}

{% block title %}{{ flatpage.title }}{% endblock %}

{% block breadcrumb %}
<div class="container">
  <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="{% url 'baykeshop:home' %}">首页</a></li>
      <li class="is-active"><a href="#" aria-current="page">{{ flatpage.title }}</a></li>
    </ul>
  </nav>
</div>
{% endblock %}

{% block container %}
<div class="container mb-3">
  <div class="columns">
    <div class="column is-2">
      <div class="box is-radiusless is-shadowless" style="height: 100%;">
        <aside class="menu">
          {% get_flatpages '/about/' as about_pages %}
          <p class=" menu-label">关于我们</p>
          <ul class="menu-list">
            {% for page in about_pages %}
            <li><a class="{% if page.url in request.path %} is-active {% endif %}" href="/pages{{ page.url }}">{{ page.title }}</a></li>
            {% endfor %}
          </ul>
          {% get_flatpages '/newbie/' as newbie_pages %}
          <p class=" menu-label">新手指南</p>
          <ul class="menu-list">
            {% for page in newbie_pages %}
            <li><a class="{% if page.url in request.path %} is-active {% endif %}" href="/pages{{ page.url }}">{{ page.title }}</a></li>
            {% endfor %}
          </ul>
          {% get_flatpages '/serve/' as serve_pages %}
          <p class=" menu-label">售后服务</p>
          <ul class="menu-list">
            {% for page in serve_pages %}
            <li><a class="{% if page.url in request.path %} is-active {% endif %}" href="/pages{{ page.url }}">{{ page.title }}</a></li>
            {% endfor %}
          </ul>
          {% get_flatpages '/faq/' as faq_pages %}
          <p class=" menu-label">常见问题</p>
          <ul class="menu-list">
            {% for page in faq_pages %}
            <li><a class="{% if page.url in request.path %} is-active {% endif %}" href="/pages{{ page.url }}">{{ page.title }}</a></li>
            {% endfor %}
          </ul>
        </aside>
      </div>
    </div>

    <div class="column">
      <div class="box is-radiusless is-shadowless">
        <h1 class="title has-text-centered">{{ flatpage.title }}</h1>
        <div class=" dropdown-divider"></div>
        <div class="content">
          {{ flatpage.content }}
        </div>
      </div>
    </div>

  </div>

</div>


{% endblock %}